// 全局 CSS 变量
@import "./variables.css";
// Transition
@import "./transition.scss";
// Element Plus
@import "./element-plus.scss";
// Vxe Table
@import "./vxe-table.scss";
// 注册多主题
@import "./theme/register.scss";
// mixin
@import "./mixins.scss";

// 业务页面几乎都应该在根元素上挂载 class="app-container"，以保持页面美观
.app-container {
  padding: 20px;
}

html {
  height: 100%;
}


body {
  height: 100%;
  background-color: var(--v3-body-bg-color);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial,
    sans-serif;
  @extend %scrollbar;
}

#app {
  height: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a,
a:focus,
a:hover {
  color: inherit;
  outline: none;
  text-decoration: none;
}

div:focus {
  outline: none;
}


.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.w100 {
  width: 100%;
}

.h100 {
  height: 100%;
}

.card {
  background: #fff;
  border-radius: 15px;
}

.cover-height {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-direction: row;
}

.column {
  display: flex;
  flex-direction: column;
}

.justify-start {
  display: flex;
  justify-content: flex-start;
}

.justify-center {
  display: flex;
  justify-content: center;
}

.justify-end {
  display: flex;
  justify-content: flex-end;
}

.justify-around {
  display: flex;
  justify-content: space-around;
}

.justify-evenly {
  display: flex;
  justify-content: space-evenly;
}

.justify-between {
  display: flex;
  justify-content: space-between;
}

.align-start {
  display: flex;
  align-items: flex-start;
}

.align-center {
  display: flex;
  align-items: center;
}

.align-end {
  display: flex;
  align-items: flex-end;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.centerV {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.evenlyV {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
}

// flex布局
@for $i from 1 through 10 {
  .flex#{$i} {
    flex: #{$i};
  }
}

.wrap {
  flex-wrap: wrap;
}

.aic {
  display: flex;
  align-items: center;
}


.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  box-sizing: border-box;
  width: 100%;
  -webkit-line-clamp: 1;
}

.lines-2 {
  -webkit-line-clamp: 2 !important;
}

.bold {
  font-weight: bold;
}

.pointer {
  cursor: pointer;
}

// 字体
@for $i from 12 through 100 {
  .fs#{$i} {
    font-size: #{$i}px;
  }
}

@for $i from 1 through 100 {
  .wh#{$i} {
    width: #{$i}px;
    height: #{$i}px;
  }
}


// padding
@for $i from 1 through 100 {
  .p#{$i} {
    padding: #{$i}px;
  }
}

@for $i from 1 through 100 {
  .ptb#{$i} {
    padding-top: #{$i}px;
    padding-bottom: #{$i}px;
  }
}

@for $i from 1 through 100 {
  .plr#{$i} {
    padding-left: #{$i}px;
    padding-right: #{$i}px;
  }
}

@for $i from 1 through 100 {
  .pt#{$i} {
    padding-top: #{$i}px;
  }
}

@for $i from 1 through 100 {
  .pl#{$i} {
    padding-left: #{$i}px;
  }
}

@for $i from 1 through 100 {
  .pr#{$i} {
    padding-right: #{$i}px;
  }
}

@for $i from 1 through 100 {
  .pb#{$i} {
    padding-bottom: #{$i}px;
  }
}

// margin
@for $i from 1 through 100 {
  .m#{$i} {
    margin: #{$i}px;
  }
}

@for $i from 1 through 100 {
  .mtb#{$i} {
    margin-top: #{$i}px;
    margin-bottom: #{$i}px;
  }
}

@for $i from 1 through 100 {
  .mlr#{$i} {
    margin-left: #{$i}px;
    margin-right: #{$i}px;
  }
}

@for $i from 1 through 100 {
  .mt#{$i} {
    margin-top: #{$i}px;
  }
}

@for $i from 1 through 100 {
  .ml#{$i} {
    margin-left: #{$i}px;
  }
}

@for $i from 1 through 100 {
  .mr#{$i} {
    margin-right: #{$i}px;
  }
}

@for $i from 1 through 100 {
  .mb#{$i} {
    margin-bottom: #{$i}px;
  }
}

// 圆角
@for $i from 0 through 100 {
  .radius#{$i} {
    border-radius: #{$i}px;
  }
}

@for $i from 10 through 50 {
  .w-calc-#{$i} {
    width: calc(100% - #{$i*2}px);
    padding-left: #{$i}px;
    padding-right: #{$i}px;
  }
}

// 来自uView的温馨提示：当您在控制台看到此报错，说明需要在App.vue的style标签加上【lang="scss"】
@for $i from 1 through 5 {
	.u-line-#{$i} {
		/* #ifdef APP-NVUE */
		// nvue下，可以直接使用lines属性，这是weex特有样式
		lines: $i;
		text-overflow: ellipsis;
		overflow: hidden;
		flex: 1;
		/* #endif */

		/* #ifndef APP-NVUE */
		// vue下，单行和多行显示省略号需要单独处理
		@if $i == '1' {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		} @else {
			display: -webkit-box!important;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-line-clamp: $i;
			-webkit-box-orient: vertical!important;
		}
		/* #endif */
	}
}